<template>
  <div class="task-wrap">
    <div class="task-title">任务市场</div>
    <div class="task-content" v-infinite-scroll="loadMore">
      <div class="task-card" v-for="item in taskList" :key="item.id">
        <div class="task-card-title">{{ item.taskName }}</div>
        <div class="task-card-abs">{{ item.taskAbst }}</div>
        <div class="task-card-rev">
          <span>
            <dict-tag :options="dict.type.crm_give_type" :value="item.authGiveType"/>
          </span>
          <span style="margin-left: 10px;color: #ee8787">佣金比例：{{ item.authRate }}</span>
        </div>
        <div class="task-card-btns">
          <el-button @click="openDetail(item)" size="small">详情</el-button>
          <el-button @click="promotionSource(item)" size="small" type="primary">推广</el-button>
        </div>
      </div>
    </div>

    <!-- 添加或修改任务管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" :close-on-click-modal="false">
      <div class="task-info-wrap">
        <div class="task-info-title">{{ form.taskName }}</div>
        <div class="task-info-date">
          {{ parseTime(form.createTime, '{y}-{m}-{d}') }}
        </div>
        <div v-html="form.taskDesc" class="task-info-content"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">推广</el-button>
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listTask, promotion} from "@/api/net/companyTask";

export default {
  name: "AuthInfo",
  dicts: ['crm_give_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 认证应用（资源）信息表格数据
      taskList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sourceCode: null,
        sourceName: null,
        sourceDept: null,
        sourceDeptName: null,
        sourceAuthType: null,
        sourcePassword: null,
        sourcePublicKey: null,
        sourcePrivateKey: null,
        sourceAuthTime: null,
        sourcePayType: null,
        sourceAuthFee: null,
        sourcePrice: null,
        sourceAdCp: null,
        belongCompany: null,
        belongCompanyName: null,
      },
      form: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询认证应用（资源）信息列表 */
    getList() {
      this.loading = true;
      listTask(this.queryParams).then(response => {
        this.taskList = [...this.taskList, ...response.rows];
        this.total = response.total;
        this.loading = false;
      });
    },
    loadMore() {
      if (this.taskList.length < this.total) {
        this.queryParams.pageNum++;
        this.getList();
      }
    },
    /** 打开详情 */
    openDetail(row) {
      this.form = row;
      this.open = true;
    },
    /** 关闭详情 */
    cancel() {
      this.open = false;
      this.form = {};
    },
    /** 提交推广 */
    submitForm() {
      this.promotionSource(this.form);
    },
    /** 提交推广 */
    promotionSource(row) {
      promotion(row.id).then(res => {
        if (res.code === 200) {
          this.$modal.msgSuccess("推广成功，请前往认证资源页面查看");
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.task-wrap {
  padding: 32px;
  height: calc(100vh);
  overflow: hidden;

  .task-title {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 24px;
    color: rgba(17, 53, 69, 1);
    margin-bottom: 20px;
  }

  .task-content {
    height: calc(100vh - 108px);
    overflow-y: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;

    .task-card {
      width: 240px;
      height: 250px;
      border-radius: 6px;
      border: 1px solid #c6c6c6;
      padding: 20px;
      margin: 0 20px 20px 0;
      //box-shadow: 4px 4px 15px 4px rgba(0, 0, 0, .15);

      &-title {
        font-size: 16px;
        color: rgba(17, 53, 69, 1);
      }

      &-abs {
        margin-top: 10px;
        font-size: 14px;
        color: #999999;
        height: 100px;
        overflow: hidden;
      }

      &-rev {
        margin: 10px 0 20px 0;
        font-size: 14px;
        color: #999999;
        display: flex;
        align-items: center;
      }

      &-btns {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .task-info-wrap {

    .task-info-title {
      font-size: 20px;
      margin: 0 0 10px 0;
      color: #1f2d3d;
    }

    .task-info-date {
      font-size: 14px;
      color: #999999;
    }

    .task-info-content {
      width: 100%;

      ::v-deep img {
        max-width: 100%;
      }
    }
  }
}
</style>
